<template>
	<view class="fy-music-play">
		<view class="music-title">
			{{music.music_title}}
		</view>
		<view class="play-icon">
			<image v-if="!status" class="play-icon__img" :src="a_icon" @click="see"></image>
			<image v-if="status" class="play-icon__img" :src="b_icon" @click="nosee"></image>
		</view>
		<view class="time-block" v-if="baseConfig!=1&&time">
			<countdown-timer ref="countdown" :time="time" @finish="onFinish">
				<template v-slot="{day, hour, minute, second, remain, time}">
					<view>{{minute>=60?"0"+hour+":":""}}{{minute>=10?minute:"0"+minute}}:{{second>=10?second:'0'+second}}</view>				
				</template>
			</countdown-timer>
		</view>
		
		<view class="cu-modal" v-if="music" :class="modalName=='info'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">{{music.music_title}}</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-blue"></text>
					</view>
				</view>
				<view class="padding-xl" style="max-height: 500px;overflow-y: auto;">
					<rich-text :nodes="music.music_intro"></rich-text>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		name:"fy-music-play",
		props:{
			music:{
				type:Object,
				default:null
			},
			baseConfig:{
				type:Number,
				default:1
			},
			mode:{
				type:String,
				default:"day"
			},
			time:{
				type:Number,
				default:0
			},
			userinfo:{
				type:Object,
				default:null
			}
		},
		watch:{
			music:{
				handler(newVal){
					this.music = newVal;
					this.updateMusic()
				}
			}
		},
		data() {
			return {
				firstMusic:true,
				status:false,
				audioCtx:null,
				modalName:"",
				viewMode:this.mode,
				a_icon:null,
				b_icon:null
			};
		},
		created() {
			this.init()
		},
		mounted() {
			if(this.audioCtx){
				if(this.audioCtx.src){
					if(this.music.music_url==this.audioCtx.src){
						this.status = true;
						this.$refs.countdown.reset();
						this.$refs.countdown.start();
					}
				}
			}
		},
		destroyed() {
			if(this.$refs.countdown){
				this.$refs.countdown.pause();
				this.$emit("update:time",this.$refs.countdown.timeData.remain);
			}
		},
		methods:{
			hideModal(){
				this.modalName = "";
			},
			updateMusic(){
				if(this.baseConfig==1){
					return;
				}else{
					this.$refs.countdown.pause();
					this.$refs.countdown.reset();
					this.audioCtx.title = this.music.music_title;
					this.audioCtx.singer = '催眠冥想';
					this.audioCtx.coverImgUrl = this.music.music_icon;
					this.audioCtx.src = this.music.music_url;
					this.audioCtx.play();
					this.status = true;
					this.$refs.countdown.start();
				}
				
			},
			
			init(){
				if(this.baseConfig==0){
					this.a_icon = this.$config.site_url+'/static/images/a.png';
					this.b_icon = this.$config.site_url+'/static/images/b.png';
				}else{
					this.a_icon = this.$config.site_url+'/static/images/verify_a.png';
					this.b_icon = this.$config.site_url+'/static/images/verify_b.png';
				}
				if(this.baseConfig!=1){
					//#ifdef H5 || APP-PLUS
					this.audioCtx = uni.createInnerAudioContext();
					//#endif
					//#ifdef MP-WEIXIN
					this.audioCtx = uni.getBackgroundAudioManager();
					//#endif
					if(this.audioCtx.src==this.music.music_url){
						this.audioCtx.title = this.music.music_title;
						this.audioCtx.singer = '催眠冥想';
					}
					this.audioCtx.onWaiting(this.onWaitingHandler.bind(this));
					this.audioCtx.onCanplay(this.onCanplayHandler.bind(this));
					this.audioCtx.onPlay(this.onPlayHandler.bind(this));
					this.audioCtx.onPause(this.onPauseHandler.bind(this));
					this.audioCtx.onStop(this.onStopHandler.bind(this));
					this.audioCtx.onEnded(this.onEndedHandler.bind(this));
					this.audioCtx.onTimeUpdate(this.onTimeUpdateHandler.bind(this));
					this.audioCtx.onError(this.onErrorHandler.bind(this));
				}else{
					
				}
				
				
			},
			see(){
				if(this.baseConfig==1){
					this.modalName = "info";
				}else{
					if(this.audioCtx){
						//需要观看激励视频
						//201用户登录但非会员
						//202用户未登录
						if(this.music.is_need_video==1){
							if(this.isUserLogin()){
								if(this.userinfo.is_vip!=1){
									this.$emit("notVip",201);
								}
								return;
							}else{
								this.$emit("notVip",202);
								return;
							}
						}
						this.audioCtx.title = this.music.music_title;
						this.audioCtx.singer = '催眠冥想';
						this.audioCtx.coverImgUrl = this.music.music_icon;
						if(this.audioCtx.src != this.music.music_url){
							this.audioCtx.src = this.music.music_url;
						}else{
							this.audioCtx.play();
						}
						this.status = true;
						this.$refs.countdown.start();
					}
				}
			},
			nosee(){
				if(this.baseConfig==0&&this.audioCtx){
					this.audioCtx.pause();
					this.status = false;
					this.$refs.countdown.pause();
					this.$emit("update:time",this.$refs.countdown.timeData.remain);
				}
			},
			isUserLogin(){
				if (typeof(this.userinfo) == "undefined" || this.userinfo == "" || JSON.stringify(this.userinfo) == "{}" || this.userinfo==null) {
					return false;
				} else {
					return true;
				}
			},
			onFinish(){
				if(this.baseConfig==0){
					this.audioCtx.stop();
					this.$refs.countdown.reset();
					this.status = false;
				}
				
			},
			onWaitingHandler(){
				
			},
			onCanplayHandler(){
				
			},
			onPlayHandler(){
			},
			onPauseHandler(){
				
			},
			onStopHandler(){
			},
			onEndedHandler(){
				if(this.baseConfig==0){
					if(this.status){
						this.audioCtx.title = this.music.music_title;
						this.audioCtx.singer = '催眠冥想';
						this.audioCtx.coverImgUrl = this.music.music_icon;
						this.audioCtx.src = this.music.music_url;
					}
				}
				
			},
			onTimeUpdateHandler(e){
				
			},
			onErrorHandler(err){
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.fy-music-play {
		width:100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-direction: column;
		position:relative;
		.music-title {
			margin-top: 110px;
			height: 30px;
			line-height: 30px;
			font-size: 18px;
			font-weight: 900;
			color: #FFF;
		}
		.play-icon {
			margin-top: 1em;
			height: 30px;
			&__img {
				width: 20px;
				height:20px;
			}
		}
		.time-block {
			margin-top: .5em;
			height: 30px;
			line-height: 30px;
			color: #FFF;
		}
		
	}
</style>